<!-- 令牌订单 -->
<template>

  <div class="pag" >
    <div class="tabs">
      <div class="tabs-head">
        <div class="tabs-head-main">
          <div :class="{'choose': curTab==1}" @click="curTab=1">购买</div>
          <div :class="{'choose': curTab==2}" @click="curTab=2">出售</div>
          <div :class="{'choose': curTab==3}" @click="curTab=3">借入</div>
          <div :class="{'choose': curTab==4}" @click="curTab=4">借出</div>
        </div>
      </div>
      <div class="tabs-body">
        <div :class="{'choose': curTab==1}">
          <div class="m-table">
            <div class="m-table-head">
              <div class="m-table-head-row">
                <div class="m-table-cell">购买渠道</div>
                <div class="m-table-cell">购买单价</div>
                <div class="m-table-cell">购买数量</div>
                <div class="m-table-cell">支付总额</div>
              </div>
            </div>
            <div class="m-table-body" v-if="list1 && list1.length">
              <cube-scroll :options="options" @pulling-up="onPullup" ref="scroll1">
                <div class="m-list">
                  <div class="m-table-row" v-for="item in list1">
                    <div class="m-table-row-head buy">
                      <div>{{ item.time }}</div>
                      <div>订单号：{{ item.orderNo }}</div>
                    </div>
                    <div class="m-table-row-body">
                      <div class="m-table-cell">{{ item.name }}</div>
                      <div class="m-table-cell">{{ item.price }}</div>
                      <div class="m-table-cell">{{ item.num }}块</div>
                      <div class="m-table-cell">{{ item.totalPrice }}</div>
                    </div>
                  </div>
                </div>
              </cube-scroll>
            </div>
            <list-empty txt="暂无购买记录" v-if="list1 && list1.length == 0"></list-empty>
          </div>
        </div>
        <div :class="{'choose': curTab==2}">
          <div class="m-table">
            <div class="m-table-head">
              <div class="m-table-head-row">
                <div class="m-table-cell">出售渠道</div>
                <div class="m-table-cell">出售单价</div>
                <div class="m-table-cell">出售数量</div>
                <div class="m-table-cell">获得总额</div>
              </div>
            </div>
            <div class="m-table-body" v-if="list2 && list2.length">
              <cube-scroll :options="options" @pulling-up="onPullup" ref="scroll2">
                <div class="m-list">
                  <div class="m-table-row" v-for="item in list2">
                    <div class="m-table-row-head sell">
                      <div>{{ item.time }}</div>
                      <div>订单号：{{ item.orderNo }}</div>
                    </div>
                    <div class="m-table-row-body">
                      <div class="m-table-cell">{{ item.name }}</div>
                      <div class="m-table-cell">--</div>
                      <!--<div class="m-table-cell">{{ item.price }}</div>-->
                      <div class="m-table-cell">{{ item.num }}块</div>
                      <div class="m-table-cell">{{ item.totalPrice }}</div>
                    </div>
                  </div>
                </div>
              </cube-scroll>
            </div>
            <list-empty txt="暂无出售记录" v-if="list2 && list2.length == 0"></list-empty>
          </div>
        </div>
        <div :class="{'choose': curTab==3}">
          <div class="m-table">
            <div class="m-table-head">
              <div class="m-table-head-row cell-five">
                <div class="m-table-cell">借入<br>数量</div>
                <div class="m-table-cell">租借<br>天数</div>
                <div class="m-table-cell">剩余<br>天数</div>
                <div class="m-table-cell">分成<br>比例</div>
                <div class="m-table-cell">出借人</div>
              </div>
            </div>
            <div class="m-table-body" v-if="list3 && list3.length">
              <cube-scroll :options="options" @pulling-up="onPullup" ref="scroll3">
                <div class="m-list">
                  <div class="m-table-row" v-for="item in list3">
                    <div class="m-table-row-head borrow-in">
                      <div>{{ item.time }}</div>
                      <div>订单号：{{ item.orderNo }}</div>
                    </div>
                    <div class="m-table-row-body cell-five">
                      <div class="m-table-cell">{{ item.num }}块</div>
                      <div class="m-table-cell">{{ item.days }}天</div>
                      <div class="m-table-cell">{{ item.remainingTime > 0 ? item.remainingTime + '天' : '已归还' }}</div>
                      <div class="m-table-cell">{{ item.scale }}%</div>
                      <div class="m-table-cell lf-align">{{ item.name }}</div>
                    </div>
                  </div>
                </div>
              </cube-scroll>
            </div>
            <list-empty txt="暂无借入记录" v-if="list3 && list3.length == 0"></list-empty>
          </div>
        </div>
        <div :class="{'choose': curTab==4}">
          <div class="m-table">
            <div class="m-table-head">
              <div class="m-table-head-row cell-five">
                <div class="m-table-cell">借出<br>数量</div>
                <div class="m-table-cell">有无<br>异常</div>
                <div class="m-table-cell">剩余<br>天数</div>
                <div class="m-table-cell">分成<br>比例</div>
                <div class="m-table-cell">承租人</div>
              </div>
            </div>
            <div class="m-table-body" v-if="list4 && list4.length">
              <cube-scroll :options="options" @pulling-up="onPullup" ref="scroll4">
                <div class="m-list">
                  <div class="m-table-row" v-for="item in list4">
                    <div class="m-table-row-head borrow-out">
                      <div>{{ item.time }}</div>
                      <div>订单号：{{ item.orderNo }}</div>
                    </div>
                    <div class="m-table-row-body cell-five">
                      <div class="m-table-cell">{{ item.num }}块</div>
                      <div class="m-table-cell">
<!--                        <div :class="getStatusClass(item.status, item.remainingTime) ">-->
<!--                          {{ getStatusTxt(item.status, item.remainingTime) }}-->
<!--                        </div>-->
                        <div :class="{red: item.status == '有'}">
                          {{ item.status }}
                        </div>
                      </div>
                      <div class="m-table-cell">{{ item.remainingTime > 0 ? item.remainingTime + '天' : '已归还' }}</div>
                      <div class="m-table-cell">{{ item.scale }}%</div>
                      <div class="m-table-cell lf-align">{{ item.name }}</div>
                    </div>
                  </div>
                </div>
              </cube-scroll>
            </div>
            <list-empty txt="暂无借出记录" v-if="list4 && list4.length == 0"></list-empty>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
  import { getSaleRentOrderList } from 'api'
  import listEmpty from 'cpnts/list-empty.vue'

  export default {
      components: {
          'listEmpty': listEmpty
      },
      data() {
          return {
              options: {
                  pullUpLoad: true
              },
              list1: null,
              list2: null,
              list3: null,
              list4: null,
              isLoading: false,
              curTab: 1,
              uid: '',
              token: ''
          }
      },
      beforeRouteEnter(to, from, next) {
          next((vm) => {
              vm.resetData()
              vm.getData()
          })
      },
      mounted() {

      },
      computed: {
          source(){
              let {curTab} = this
              return curTab%2 == 1 ? 0 : 1
          },
          mode(){
              let {curTab} = this
              return curTab > 2  ? 'rent' : 'sale'
          }
      },
      watch: {
          curTab(val) {
              let list = this['list' + val]
              if (!list || list.length < 20) {
                  this.getData()
              } else {
                  this.$nextTick(() => {
                      let sc = this.$refs['scroll' + val]
                          if(sc){
                            sc.forceUpdate(true)
                          }

                  })
              }
          }
      },
      methods: {
          resetData(){
              this.list1= null
                  this.list2= null
                  this.list3= null
                  this.list4= null
                  this.isLoading= false
                  this.curTab= 1
          },
          getStatusClass(status, remainingTime){
              if(remainingTime == 0){
                  return []
              }else {
                  return  status == 0 ? ['green'] : ['red']
              }
          },
          getStatusTxt(status, remainingTime){
              if(remainingTime == 0){
                  return '已归还'
              }else {
                return  status == 0 ? '无' : '有'
              }
          },
          async onPullup() {
              let me = this
              let {curTab, source, mode} = this
              let sc = this.$refs['scroll' + curTab]
              if (me['list' + curTab].length < 20) {
                  return this.getData()
              }

              let pagec = Math.floor((me['list' + curTab].length - 20) / 20) + 1
              let pagey = (me['list' + curTab].length - 20) % 20
              try {
                  let {data} = await getSaleRentOrderList({
                      mode,
                      source,
                      per: 20,
                      page: 1 + pagec
                  })
                  if (!data) {
                      sc.forceUpdate()
                      return
                  }
                  if (pagey) {
                      data.splice(0, pagey)
                  }
                  me['list' + curTab] = me['list' + curTab].concat(data)
                  if (!data.length) {
                      sc.forceUpdate()
                  } else {
                      this.$nextTick(() => {
                          sc.forceUpdate(true)
                      })
                  }
              } catch (e) {
                  this.toastTip(e.info)
                  sc.forceUpdate()
              }


          },
          async getData() {
              let {source, mode} = this
              let sc = this.$refs['scroll' + this.curTab]
              try {
                  let {data} = await getSaleRentOrderList({
                      source,
                      mode,
                      per: 20,
                      page: 1
                  })
                  if (!data) {
                      this['list' + this.curTab] = []
                      sc && sc.forceUpdate()
                      return
                  }
                  this['list' + this.curTab] = data
                  this.$nextTick(() => {
                      this.$refs['scroll' + this.curTab].forceUpdate(true)
                  })
              } catch (e) {
                  this.toastTip(e.info)
                  sc && sc.forceUpdate()
              }
          },
          toastTip(info) {
              this.$warn(info)
          }
      }
  }
</script>

<style lang="scss" scoped>
  @import "~common/scss/variable";
  @import "~common/scss/mixin";

  .pag {
    height: 100%;
    //overflow-y: auto;
    background: #F5F5FB;
  }

  .tabs {
    height: 100%;
    color: #202C5B;
    font-size: 26px;
  }

  .tabs-head {
    align-items: flex-end;
    display: flex;
    height:96px;
    background:linear-gradient(180deg,rgba(73,189,250,1) 0%,rgba(43,117,243,1) 100%);
    padding: 0 32px;
  }

  .tabs-head-main {
    display: flex;
    width: 100%;
    height:72px;
    background: #E5E5E9;
    border-radius:10px 10px 0px 0px;
    > div {
      height:72px;
      color: #838899;
      width: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      &.choose {
        background: #fff;
        color: #202C5B;
        font-weight: 600;
        border-radius:10px 10px 0px 0px;
      }
    }
  }



  .tabs-body {
    height: calc(100% - 96px);
    > div {
      height: 100%;
      display: none;
      &.choose {
        display: block;
      }
    }
  }

  .m-list {

  }

  .m-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ECECEC;
    height: 97px;
    > div {
      &:nth-of-type(1) {
        font-size: 30px;
        color: #202C5B;
        p {
          margin-top: 14px;
          color: #71768C;
          font-size: 20px;
        }
      }
      &:nth-of-type(2) {
        font-size: 24px;
        color: #71768C;
      }
    }
  }

  .m-table {
    height: 100%;
  }

  .m-table-head {
    //height: 88px;
    border-bottom: 2px solid #C0C4D6;
    .m-table-head-row {
      height: 90px;
      display: flex;
      align-items: center;
      padding: 0 31px 0 29px;
      background: #fff;
      line-height: 1.31;
    }
  }

  .m-table-body {
    height: calc(100% - 90px);
  }

  .m-table-row {
    margin: 14px auto 0 auto;
    background: #fff;
    width:690px;
    height:116px;
    box-shadow:0px 1px 2px 0px rgba(10,29,87,0.3);
    border-radius:10px;
    overflow: hidden;
  }

  .m-table-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 36px;
    padding: 0 15px;
    font-size: 24px;
    color: #fff;
    &.buy {
      background: #7FD5C3;
    }
    &.sell {
      background: #FFA4A3;
    }
    &.borrow-in {
      background: #BCAFFF;
    }
    &.borrow-out {
      background: #96B8FE;
    }
  }

  .m-table-row-body {
    height: calc(100% - 36px);
    display: flex;
    align-items: center;
    font-size: 26px;
    font-weight: 600;
  }

  .m-table-cell{
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.31;
    &:nth-of-type(1) {
      max-width: 25%;
      width: 25%;
      justify-content: flex-start;
      padding-left: 30px;
    }
    &:nth-of-type(2) {
      max-width: 25%;
      width: 25%;
    }
    &:nth-of-type(3) {
      max-width: 20%;
      width: 20%;
    }
    &:nth-of-type(4) {
      max-width: 30%;
      width: 30%;
      justify-content: flex-end;
      padding-right: 31px;
    }
  }

  .cell-five {
    .m-table-cell {
      &:nth-of-type(1) {
        max-width: 15%;
        width: 15%;
        justify-content: flex-start;
        padding-left: 30px;
      }
      &:nth-of-type(2) {
        max-width: 15%;
        width: 15%;
      }
      &:nth-of-type(3) {
        max-width: 15%;
        width: 15%;
      }
      &:nth-of-type(4) {
        max-width: 15%;
        width: 15%;
        padding-right: 0;
        justify-content: center;
      }
      &:nth-of-type(5) {
        //max-width: 22%;
        //width: 22%;
        flex: 1;
        justify-content: flex-end;
        padding-right: 30px;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      &.lf-align {
        justify-content: flex-start;
        &:before {
          content: '';
          display: inline-block;
          flex: 1;
          width: auto;
        }
      }
    }
  }


  .red {
    color: #DC0630;
  }

  .green {
    color: #00A989;
  }




</style>













